<template>
    <a-menu
        :defaultOpenKeys="['0_1']"
        :defaultSelectedKeys="['0_1']"
        :style="{ width: '100%' }"
        class="sider_menu"
      >
        <a-menu-item key="0_1" @click="gotopath('0_1')">
            <div class="sider_menu_item" >
                <!-- <router-link to="/"> -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 48 48"><path fill="none" stroke="#B3B4B1" stroke-linejoin="round" stroke-width="3" d="M18 6H8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm0 22H8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V30a2 2 0 0 0-2-2ZM40 6H30a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm0 22H30a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V30a2 2 0 0 0-2-2Z"/></svg>
                <!-- </router-link> -->
            </div>
            
          <!-- <IconHome  size="24"/> -->
        </a-menu-item>
        <a-menu-item key="0_2" @click="gotopath('0_2')">
            <!-- <router-link to="/home" > -->
                <div class="sider_menu_item"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 48 48"><path fill="none" stroke="#B3B4B1" stroke-linecap="round" stroke-width="3" d="M24 4v40m10-28v24M4 18v12m40-12v12M14 12v24"/></svg></div>
            <!-- </router-link> -->
        </a-menu-item>
        <a-menu-item key="0_3" @click="gotopath('0_3')">
            <div class="sider_menu_item" >
                <!-- <router-link to="/download"> -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 48 48"><g fill="none" stroke="#B3B4B1" stroke-linejoin="round" stroke-width="3"><path d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4S4 12.954 4 24s8.954 20 20 20Z"/><path stroke-linecap="round" d="M24 15v18m9-9l-9 9l-9-9"/></g></svg>
                <!-- </router-link> -->
            </div>
           
          <!-- <IconCalendar  size="24" /> -->
        </a-menu-item>
        <a-menu-item key="0_4" @click="gotopath('0_4')">
            <div class="sider_menu_item">
                <!-- <router-link to="/card"> -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 48 48"><path fill="none" stroke="#B3B4B1" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4S4 12.954 4 24s8.954 20 20 20m-9-20h18m-13.5-7.794l9 15.588m0-15.588l-9 15.588"/></svg>
                <!-- </router-link> -->
            </div>
           
        </a-menu-item>
      </a-menu>
</template>

<script setup>
  import {  useRouter } from 'vue-router';

  const router = useRouter();

// eslint-disable-next-line no-unused-vars
const handleChange = (val) => {
    // console.log('>>>>>',val)
}

const pathName = {
    '0_1': 'Index',
    '0_2': 'Home',
    '0_3': 'DownloadList',
    '0_4': 'PscgoCard'
}

const gotopath =(key) => {
    // console.log(key,'<<<<<', pathName[key],)
    router.push({
          name: pathName[key],
    });
}

</script>
<style scoped>
.sider_menu {
    margin-top: 20px;
    z-index: 1000;
}
.sider_menu_item {

}
/* .arco-menu :deep() {} */
.arco-menu-vertical .arco-menu-item, .arco-menu-vertical .arco-menu-group-title, .arco-menu-vertical .arco-menu-pop-header, .arco-menu-vertical .arco-menu-inline-header {
    padding: 6px;
    line-height: 1;
}
.arco-menu-vertical .arco-menu-item, .arco-menu-vertical .arco-menu-group-title, .arco-menu-vertical .arco-menu-pop-header, .arco-menu-vertical .arco-menu-inline-header {
    margin-bottom: 10px;
}
</style>